<template>
  <div>
    <div id="bo">
      <p>查询</p>
    </div>
    <div id="co">
      <div class="block">
        &nbsp;&nbsp;<span class="demonstration">查询:</span>&nbsp;&nbsp;&nbsp;
    <el-date-picker
      v-model="timeaction"
      align="right"
      type="date"
      placeholder="起始日期"
      :picker-options="pickerOptions">
    </el-date-picker>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <el-date-picker
      v-model="timeend"
      align="right"
      type="date"
      placeholder="结束日期"
      :picker-options="pickerOptions" @blur="time()">
    </el-date-picker>
  </div>

    </div>
<div id="bo"> 
      <span>明细数据</span> <el-button class="ww" type="text" @click="dialogFormVisible = true">点击添加</el-button>

<el-dialog title="新增员工" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="姓名" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="电话" :label-width="formLabelWidth">
      <el-input v-model="form.dh" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="所属门店" :label-width="formLabelWidth">
      <el-input v-model="form.md" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" :label-width="formLabelWidth">
      <el-input v-model="form.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="性别" :label-width="formLabelWidth">
      <el-select v-model="form.region" placeholder="请选择性别">
        <el-option label="男" value="男"></el-option>
        <el-option label="女" value="女"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">   
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="fn()" v-on:click="dialogFormVisible = false" >新 增</el-button>
<el-button type="primary" @click="fc(scope.$index,scope.row)" v-on:click="dialogFormVisible = false" >更 改</el-button>
  </div>
</el-dialog>
</div>

    <el-table
    :data="tableData"
    border
    style="width: 99%">
    <el-table-column
      fixed
      prop="adminId"
      label="员工编号">
    </el-table-column>
    <el-table-column
      prop="adminName"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="adminDate"
      label="入职时间">
    </el-table-column>
    <el-table-column
      prop="adminMail"
      label="联系方式"
     >
    </el-table-column>
    <el-table-column
      prop="adminSex"
      label="性别"
     >
    </el-table-column>
    <el-table-column
      prop="adminPass"
      label="登录密码"
      >
    </el-table-column>
    <el-table-column
      label="操作">
      <template slot-scope="scope">
        <el-button  @click="handleClick(scope.$index,scope.row)" type="text" size="small">删除</el-button>
        <el-button type="text" size="small" v-on:click="dialogFormVisible = true">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

    &emsp;&emsp;&emsp;<div class="block">
      <!-- <span class="demonstration">完整功能</span> -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"   :current-page="currentPage4"
        :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { bianji } from '@/apis/zhaowenbo/zhaowenbo.js'
import { yuangong,add,del,timequery} from '@/apis/zhaowenbo/zhaowenbo.js'
export default {
  data() {
    return {
      total:0,
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        pagesize:5,
        current:1,
        timeaction: '',
        timeend: '',
        value: '',
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 51,
      tableDataa: [{}],
      tableData: [{}],
      adminId:'',
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          dh:'',
          password:'',
          md:'农家小炒肉',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''

        },
        formLabelWidth: '120px'
    }
  },
  computed:{

  },
  mounted() {
    this.xuan()
  },
  methods:{
    xuan(){
      yuangong().then((ok) => {
      console.log(ok);
      this.tableDataa = ok.data.data.records
      this.tableData = ok.data.data.records.slice((this.current-1)*this.pagesize,this.current*this.pagesize)
      this.total= this.tableDataa.length
    })
    },
    time(){
      console.log(this.timeaction);
      console.log(this.timeend);
      timequery(this.timeaction,this.timeend).then((ok)=>{
        console.log(ok);
        this.tableData = ok.data.data.records
      })

    },
    fn(){
      add(this.form.name,this.form.dh,this.form.password,this.form.region).then((ok)=>{
        console.log(this.form.region);
        console.log(ok);
        this.xuan()
        this.form.name='',this.form.dh='',this.form.password='',this.form.region=''
      })
    },
    fc(a,b){
      console.log(a)
      console.log(b);
      console.log(this.form.name);
      bianji(this.form.name,this.form.dh,this.form.password).then((ok)=>{
        console.log(ok);

        this.xuan()
      })
    },
    handleSizeChange(val) {
      console.log(`一页个数: ${val}`);
      this.pagesize=val
      console.log( this.current);
       console.log(val);
      console.log(this.pagesize);
      yuangong().then((ok)=>{
        
        console.log(this.pagesize);
        console.log(ok);
        this.tableData = ok.data.data.records.slice((this.current-1)*this.pagesize,this.current*this.pagesize)
      })
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current=val
      yuangong().then((ok)=>{
        
        console.log(this.pagesize);
        console.log(ok);
        this.tableData = ok.data.data.records.slice((this.current-1)*this.pagesize,this.current*this.pagesize)
      })
    },
    handleClick(a,b){  
   del(b.adminId).then((ok)=>{
    console.log(ok);
    this.xuan()
   })

    }
  },

}
</script>

<style scoped>
template{
  overflow-x: hidden;
}
.ww{
  float: right;
  display: block;
  line-height: 50px;
  margin-right: 50px;
  font-size: 16px;
}
#bo {
  text-indent: 20px;
  margin-top: 80px;
  width: 100%;
  height: 70px;
  background-color: rgb(220, 220, 220);
  line-height: 70px;
  border: 1px solid;
}

#co {
  width: 100%px;
  border: 1px solid;
  padding-top: 40px;
  padding-bottom: 40px;
  border-top: 0;
  margin-bottom: 20px;
}

.el-pagination {
  width: 300px;
  margin: 0 300px;

}
</style>